<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">

		<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
		<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
		 crossorigin="anonymous"> -->
		<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
		<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
		 crossorigin="anonymous"> -->

		<link rel="stylesheet" type="text/css" href="../static/dist/css/bootstrap.css" />
	</head>
	<style type="text/css">
		body,
		html {
			background-color: #FDFDFD;
			height: 100%;
			padding: 0;
		}

		.container-fluid {
			margin-top: 20px;
			height: 100%;
			display: flex;
			align-items: center;
		}

		.my-form {
			margin: 0 auto;
			/* width: 100%; */
			border: solid #cfcfcf 1px;
			border-radius: 5px;
			box-shadow: 1px 3px 10px #337AB7;
		}

		.my-form .form-title {
			width: 100%;
			height: 50px;
			background-color: rgba(51, 122, 183, 0.2);
			text-align: center;
			line-height: 50px;
			font-size: 26px;
			margin-bottom: 20px;
			color: #337AB7;
		}

		.my-form .userErr1,
		.my-form .userErr2,
		.my-form .userErr3,
		.my-form .userErr4,
		.my-form .userErr5 {
			margin-bottom: 10px;
			font-size: 12px;
			min-height: 18px;
			color: #FF0000;
		}

		.my-form .input {
			margin: 10px 10px;
		}

		.my-form .input-group,
		.my-form .input-group button {
			width: 100%;
		}

		.userMsg {
			margin-top: 10px;
			border-bottom: solid 1px #dedede;
		}

		.userMsg a {
			margin: 5px 0 20px;
			float: right;
			/* opacity: 0.8; */
		}

		.div-img input {
			border-radius: 5px !important;
		}

		.div-img input::placeholder {
			font-size: 16px;
		}

		.mySpan-img #code {
			font-size: 20px;
			line-height: 35px;
			width: 100px;
			display: block;
			background-color: #EEEEEE;
		}

		span.mySpan-img {
			padding: 0 0 0 40px !important;
			border: 0;
			background-color: #FDFDFD !important;
			border: none !important;
		}

		.has-primary .input-group-addon {
			color: #337AB7;
			background-color: rgba(51, 122, 183, 0.1);
			border: solid 1px #337AB7;
		}

		.has-primary .form-control {
			border: solid 1px #337AB7 !important;
			margin-left: -1px;
		}

		.regist {
			text-align: right;
			margin-top: 3px;
		}

		.regist span,
		userMsg span {
			opacity: 0.8;
		}

		.input .input-group strong {
			width: 50px;
			display: block;
		}
	</style>
	<div class="container-fluid">
		<form class="form-horizontal my-form">
			<div class="form-title">
				申请入驻
			</div>
			<div class="input">
				<div class="input-group  has-primary">
					<span class="input-group-addon" id="input1"><strong>用户名</strong></span>
					<input type="text" value="" class="form-control" placeholder="请输入账号" id="username" aria-describedby="input1">
				</div>
				<div class="userErr1">
					<!-- 该用户名已存在！ -->
				</div>
				<div class="input-group  has-primary">
					<span class="input-group-addon" id="input2"><strong>邮箱</strong></span>
					<input type="email" value="" class="form-control" id="useremail" placeholder="请输入邮箱号"
					 aria-describedby="input2">
				</div>
				<div class="userErr2">
					<!-- 邮箱格式不正确！ -->
				</div>
				<div class="input-group  has-primary">
					<span class="input-group-addon" id="input3"><strong>密码</strong></span>
					<input type="password" value="" class="form-control" placeholder="请输入密码" id="userpsd" aria-describedby="input3">

				</div>
				<div class="userErr3">
					<!-- 密码格式不正确！ -->
				</div>
				<div class="input-group  has-primary">
					<span class="input-group-addon" id="input4"><strong>确认密码</strong></span>
					<input type="password" value="" class="form-control" id="userpsd2" placeholder="确认密码" aria-describedby="input4">
				</div>
				<div class="userErr4">
					<!-- 两次密码不一致！ -->
				</div>
				<div class="input-group  has-primary div-img">
					<input type="text" id="userCode" class="form-control" placeholder="请输入验证码" aria-describedby="input5">
					<span class="input-group-addon mySpan-img" id="input5">
						<span id="code"><strong>验证码</strong></span>
					</span>
				</div>
				<div class="userErr5" id="codeErr">
					<!-- 验证码输入错误！ -->
				</div>
				<br>
				<div class="input-group">
					<button id="submit" type="button" class="btn btn-primary">申请入驻</button>
				</div>
				<div class="regist">
					<!-- <span>已有账号!</span> <span class="glyphicon glyphicon-arrow-right"></span> <a class="r_login">去登录</a> -->
				</div>
				<div class="userMsg"><a href="#" data-toggle="modal" data-target="#myModal">点击查看友情提示 <span class="glyphicon glyphicon-question-sign"></span></a></div>
				<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
					<div class="modal-dialog" role="document">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
								<h4 class="modal-title" id="myModalLabel" style="text-align: center;">申请入驻须知</h4>
							</div>
							<div class="modal-body">
								1.申请入驻的用户名若<a>申请成功并且审核通过用户名不可修改</a>. <br>
								2.如果您已经申请成，后台会进行审核,<a>请留意三个工作日的电子邮件回复,</a>若一直未收到电子邮件请联系我们. <br>
								3.审核期间可通过该进行登录浏览系统界面查看系统功能.
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
								<button type="button" class="btn btn-primary" data-dismiss="modal">确认</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</form>
	</div>
	</body>
	<script src="../static/js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../static/dist/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>

	<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
	<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
	<!-- <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script> -->
	<script>
		$('.r_login').on('click', function() {
			window.location.href = "wxlogin.html";
		})

		function ajax_(url_, type_, data_) {
			return $.ajax({
				async: false,
				type: type_,
				url: url_,
				data: data_,
				contentType: "application/json;charset=UTF-8",
				// contentType: "application/x-www-form-urlencoded",
				success: function(resp) {
					return resp
				},
				error: function(error) {
					return error
				}
			}).responseJSON;
		}

		//切换校验样式类
		function border_class(flag, ele_obj) {
			if (flag) { //验证通过
				ele_obj.parent().removeClass("has-error")
				ele_obj.parent().addClass("has-primary")
			} else {
				ele_obj.parent().removeClass("has-primary")
				ele_obj.parent().addClass("has-error")
			}
		}
		//用户名规则
		function username_(username_obj) {
			var username = username_obj.val();
			username = username.replace(/\s*/g, ""); //去除字符串内所有的空格
			if (username == "") {
				$(".userErr1").text("用户名不能为空")
				return false;
			}
			if (username.length < 4 || username.length > 14) {
				$(".userErr1").text("请使用长度4-14个字符,只能包括数字和字母")
				return false;
			}
			var pat = new RegExp("^[A-Za-z0-9]+$");
			
			if (pat.test(username) == false){
				$(".userErr1").text("请输入数字和字母组合的用户名")
				return false;
			}
			
			
			
			return true;
		}
		//邮箱规则
		function email_(email_obj) {
			//获取文本元素的值
			//邮件格式
			reg = /^([a-zA-Z0-9]+[_|\-|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\-|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/gi;
			//非空验证
			if (email_obj.val() == "") {
				$(".userErr2").text("请输入电子邮件")
				return false;
			}
			//格式验证
			else if (!reg.test(email_obj.val())) {
				$(".userErr2").text("请输入正确的电子邮件")
				return false;
			} else {
				return true;
			}
		}
		//密码规则
		function psd_(psd_obj) {
			var psdVal = psd_obj.val();
			psdVal = psdVal.replace(/\s*/g, ""); //去除字符串内所有的空格
			if (psdVal == "") {
				console.log(psdVal)
				$(".userErr3").text("密码不能为空")
				return false;
			}
			if (psdVal.length < 6 || psdVal.length > 14) {
				$(".userErr3").text("请使用长度6-14的字母数字或者下划线组合密码")
				return false;
			}
			if (/^\w+$/.test(psdVal) == false){
				$(".userErr3").text("请输入数字和字母下划线组合的密码")
				return false;
			}
			return true;
		}

		//用户名校验
		$("#username").blur(function() {
			//校验用户名格式
			var flag = username_($(this))
			border_class(flag, $(this))
			if (flag) { //用户名格式正确，校验用户名是否存在code=307
				$(".userErr1").text("")
				url_ = "http://test.aimendian.cn/face/account/check";
				type_ = "GET";
				data_ = {
					type: "username",
					value: $(this).val()
				};
				var resp = ajax_(url_, type_, data_)
				if (resp.code == 100) {
					$(".userErr1").text(data_.username)
				} else if (307) {
					$(".userErr1").text("用户名已存在")
					border_class(false, $(this))
				} else {
					console.log(resp)
				}
			} else {
			}
		});

		//邮箱校验
		$("#useremail").blur(function() {
			// 校验邮箱格式
			var flag = email_($(this))
			border_class(flag, $(this))
			if (flag) {
				$(".userErr2").text("")
				//邮箱格式正确校验邮箱是否可以注册code=308
				var url_ = "http://test.aimendian.cn/face/account/check";
				var type_ = "GET";
				var data_ = {
					type: "email",
					value: $(this).val()
				};
				var response_obj = ajax_(url_, type_, data_)

				if (response_obj.code == 100) {
					$(".userErr2").text("")
				} else if (response_obj.code == 308) {
					$(".userErr2").text("该邮箱已被注册")
					border_class(false, $(this))
				} else {
					console.log(response_obj)
				}
			}
		})


		//密码1校验
		
		$("#userpsd").blur(function () {
			//校验密码格式
			var flag = psd_($(this))
			border_class(flag, $(this))
			if (flag) {
				$(".userErr3").text("")
			}
		})

		//密码2校验
		$("#userpsd2").blur(function() {
			//两次密码是否正确
			if ($("#userpsd").val() == $(this).val()) {
				$(".userErr4").text("")
				border_class(true, $(this))
			} else {
				border_class(false, $(this))
				$(".userErr4").text("两次密码输入不一致")
			}
		})

		//验证码
		var userCode = $("#userCode")

		var code = 99;

		function codes() {
			var ranColor = '#' + ('00000' + (Math.random() * 0x1000000 << 0).toString(16)).slice(-6); //随机生成颜色
			var ranColor2 = '#' + ('00000' + (Math.random() * 0x1000000 << 0).toString(16)).slice(-6);
			var num1 = Math.floor(Math.random() * 10);
			var num2 = Math.floor(Math.random() * 10);
			code = num1 + num2;
			// userCode.val(code)
			$("#code").html(num1 + "+" + num2 + "=?");
			if ($("#code").hasClass("nocode")) {
				$("#code").removeClass("nocode");
				$("#code").addClass("code");
			}
			$("#code").css('background', ranColor);
			$("#code").css('color', ranColor2);
		}
		//生成验证码
		$("#code").on('click', codes)
		codes()
		//校验验证码
		function codepro(){
			if (userCode.val() == code && code != 99) {
				border_class(true, $(this))
				$("#codeErr").text("")
				return true
			} else {
				border_class(false, $(this))
				$("#codeErr").text("验证码输入错误！")
				return false
			}
		}
		var code_flag
		userCode.blur(function() {
			code_flag = codepro()
			setInterval(function(){
				code_flag = codepro()
			},1000)
			return code_flag
		});
		
		//申请入驻
		$("#submit").on("click", function() {
			var A = $("#userpsd").val()
			var B = $("#useremail").val()
			var C = $("#username").val()
			var D = $("#userpsd2").val()
			var E = $("#userCode").val()
			if(!code_flag){
				E = ""
			}
			if(A==""||B==""||C==""||D==""||E==""){
				alert("请填入正确的信息")
			}else{
				var url_ = "http://test.aimendian.cn/face/account/register";
				var type_ = "POST";
				var data_ = {
					"username": C,
					"password": A,
					"email": B
				};
				console.log(data_)
				data_ = JSON.stringify(data_)
				console.log(data_)
				var resp = ajax_(url_, type_, data_)
				
				try {
					if (resp.code == 100) {
						window.location.href = "registers.html?email="+B
					}
				} catch (e) {
					alert("申请失败")
					console.log(e)
				}
			}
			
		})

		// //创建异步请求对象
		// const createXMLHttpRequest = function() {
		// 	try {
		// 		return new XMLHttpRequest();
		// 	} catch (e) {
		// 		try {
		// 			return new ActiveXObject("Msxml2.XMLHTTP");
		// 		} catch (e) {
		// 			try {
		// 				return new ActiveXObject("Microsofi.XMLHTTP");
		// 			} catch (e) {
		// 				alert("未知浏览器！！！！");
		// 				throw e;
		// 			}
		// 		}
		// 	}
		// }
		// 
		// const $ajax = function(url, type, data) {
		// 	return new Promise((resolve, reject) => {
		// 		var key_value = ""
		// 		for (var item in data) {
		// 			key_value = key_value + item + "=" + data[item] + "&"
		// 		}
		// 		key_value = key_value.slice(0,-1)
		// 		
		// 		if(type == "GET"){
		// 			url = url+"?"+key_value
		// 		}
		// 		
		// 		// 创建 XMLHttpRequest对象,用于在后台与服务器交换数据。
		// 		let request = new XMLHttpRequest()
		// 		//设置向服务器提交的方式
		// 		request.open(type, url, true)
		// 		request.responseType = 'json'
		// 
		// 		if (type == "POST") {
		// 			request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		// 		} else {
		// 			request.setRequestHeader("Accept", "application/json");
		// 		}
		// 
		// 		// onreadystatechange捕获事件请求的状态
		// 		request.onreadystatechange = function handlerRequest() {
		// 			//readyState为4的时候，代表请求操作已经完成，这意味着数据传输已经彻底完成或失败。
		// 			if (this.readyState === 4) {
		// 				//请求成功
		// 				if (this.status === 200) {
		// 					resolve(this.response)
		// 				} else {
		// 					reject(new Error(this.statusText));
		// 				}
		// 			}
		// 		}
		// 		
		// 		//发送 HTTP 请求,默认异步请求
		// 		if (type == "POST") {
		// 			request.send(key_value);
		// 		} else {
		// 			request.send(null)
		// 		}
		// 	})
		// }
		// 
		// function ajax_(url_, type_, data_) {
		// 	
		// 	return $ajax(url_, type_, data_).then((resolve) => {
		// 		return resolve
		// 	}).catch((reject) => {
		// 		return reject
		// 	})
		// 	
		// }
	</script>
</html>
